<span page-title ng-model="contentView">{{ 'Content View:' | translate }} {{ contentView.name }}</span>


<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2 translate>{{ contentView.name }}</h2>
  </header>

  <div data-block="messages">
    <div bst-alert="info" ng-show="pendingVersionTask">
      <span translate>Many Content View actions are disabled while a version task is in progress.</span>
    </div>
  </div>

  <nav data-block="item-actions">
    <button type="button" class="btn btn-primary" ng-hide="denied('publish_content_views', contentView) || contentView.import_only"
            ui-sref="content-view.publish">
      <span translate>Publish New Version</span>
    </button>

    <span bst-feature-flag="custom_products">
      <span select-action-dropdown>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
          <li role="menuitem" ng-hide="denied('publish_content_views', contentView)">
            <a ui-sref="content-view.copy">
              <span translate>Copy Content View</span>
            </a>
          </li>

          <li class="divider" ng-hide="denied('destroy_content_views', contentView)"></li>

          <li role="menuitem" ng-hide="denied('destroy_content_views', contentView)">
            <a ui-sref="content-view.deletion">
              <span translate>Remove Content View</span>
            </a>
          </li>
        </ul>
      </span>
    </span>
  </nav>

  <nav data-block="navigation">
    <ul class="nav nav-tabs" ng-show="contentView.$resolved">
      <li ng-class="{active: isState('content-view.info') || isState('content-view.deletion')}">
        <a ui-sref="content-view.info" translate>
          Details
        </a>
      </li>

      <li ng-class="{active: stateIncludes('content-view.version') || stateIncludes('content-view.versions')}">
        <a ui-sref="content-view.versions" translate>
          Versions
        </a>
      </li>

      <li ng-class="{active: stateIncludes('content-view.components.composite-content-views')}" ng-show="contentView.composite">
        <a ui-sref="content-view.components.composite-content-views.list" translate>
          Content Views
        </a>
      </li>

      <li uib-dropdown
          ng-class="{active: stateIncludes('content-view.repositories.yum') || stateIncludes('content-view.yum.filters')}"
          ng-hide="contentView.composite || contentView.import_only || !repositoryTypeEnabled('yum')">

        <a uib-dropdown-toggle>
          <span translate>Yum Content</span>
          <i class="fa fa-chevron-down"></i>
        </a>
        <ul uib-dropdown-menu>
          <li>
            <a ui-sref="content-view.repositories.yum.list" translate>
              Repositories
            </a>
          </li>
          <li ng-hide="contentView.import_only">
            <a ui-sref="content-view.yum.filters" translate>
              Filters
            </a>
          </li>
        </ul>
      </li>

      <li ng-class="{active: stateIncludes('content-view.repositories.deb')}"
          ng-hide="contentView.composite || contentView.import_only || !repositoryTypeEnabled('deb')">
        <a ui-sref="content-view.repositories.deb.list" translate>
          Apt Repositories
        </a>
      </li>

      <li ng-class="{active: stateIncludes('content-view.repositories.file')}"
          ng-hide="contentView.composite || contentView.import_only || !repositoryTypeEnabled('file')">
        <a ui-sref="content-view.repositories.file.list" translate>
          File Repositories
        </a>
      </li>

      <li uib-dropdown
          ng-class="{active: stateIncludes('content-view.repositories.docker') || stateIncludes('content-view.docker.filters')}"
          ng-hide="contentView.composite || contentView.import_only || !repositoryTypeEnabled('docker')">
        <a uib-dropdown-toggle>
          <span translate>Container Images</span>
          <i class="fa fa-chevron-down"></i>
        </a>
        <ul uib-dropdown-menu>
          <li>
            <a ui-sref="content-view.repositories.docker.list" translate>
              Repositories
            </a>
          </li>
          <li>
            <a ui-sref="content-view.docker.filters" translate>
              Filters
            </a>
          </li>
        </ul>
      </li>

      <li ng-class="{active: stateIncludes('content-view.repositories.ostree')}"
          ng-hide="contentView.composite || contentView.import_only || !repositoryTypeEnabled('ostree')">
        <a ui-sref="content-view.repositories.ostree.list" translate>
          OSTree Content
        </a>
      </li>

      <li ng-class="{active: isState('content-view.history')}">
        <a ui-sref="content-view.history" translate>
          History
        </a>
      </li>

      <li ng-class="{active: stateIncludes('content-view.tasks')}">
        <a translate
           ui-sref="content-view.tasks.index({contentViewId: contentView.id})">
          Tasks
        </a>
      </li>
    </ul>
  </nav>

  <section data-block="content">
    <div ui-view></div>
  </section>
</div>
